<template>
  <div class="app-container"
       style="min-height: 100%"
  >
    <el-row :gutter="24" class="mb8">
      <el-col :span="24">
        <el-button style="margin-right: 10px" :type="isChangeBtn?'primary':''" @click="isChangeBtn=true">日志分析</el-button>
        <el-button style="margin-left: 0" :type="isChangeBtn?'':'primary'" @click="isChangeBtn=false" v-hasPermi="['toolsystem:logs:download']">下载日志</el-button>
      </el-col>
    </el-row>

    <div v-show="isChangeBtn">
      <log-analysis></log-analysis>
    </div>
    <div v-show="!isChangeBtn">
      <el-card class="box-card" style="margin-top:20px">
        <div slot="header" class="clearfix">
          <span>筛选下载</span>
        </div>
        <div class="text item">
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px">
            <el-form-item label="日期：" prop="testSession">
              <el-select
                v-model="queryParams.testSession"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in dateList"
                  :key="index"
                  :label="item.testSessionZh"
                  :value="item.testSession"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="isLoading" @click="downloadBtn">开始下载</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <el-dialog
      width="80%"
      :visible.sync="isLoading"
      class="progress-dialog"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-progress class="excel" :text-inside="true" :stroke-width="20" :percentage="percentage"></el-progress>
    </el-dialog>
  </div>
</template>

<script>
  import {downLoadLog, logProgress} from "@/api/toolsystem/logs";
  import {downLoadAnswer} from "@/api/toolsystem/downloadAnswer";
  import logAnalysis from "@/components/ToolSystem/Logs/logAnalysis"
  export default {
    name: "Logs",
    components:{ logAnalysis },
    data(){
      return{
        isChangeBtn: true,
        isLoading: false, // dialog显示隐藏
        percentage: 0, // 上传进度
        timer: null,// 定时器
        // 查询参数
        queryParams: {
          testSession: null
        },
        dateList: [],
      }
    },
    watch:{
      percentage(value){
        console.log(value)
        if(this.percentage==100){
          this.isLoading = false;
          clearInterval(this.timer)
          setTimeout(()=>{
            this.$root.globalDialog = false
          },2000)
          this.msgSuccess('下载成功')
        }
      }
    },
    created() {
      this.getList()
    },
    methods:{
      // 下载日志按钮操作
      downloadBtn(){
        if(!this.queryParams.testSession){
          return this.msgInfo('请选择日期')
        }
        this.$confirm('确认要开始下载日志?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.isLoading = true
            this.percentage = 0
            this.$root.percentage = 0
            this.$root.globalDialog = true
            this.timer=setInterval(()=>{
              this.queryProcess()
            },10000)
            this.downLoadLogs()
          })
          .catch(()=>{
            this.msgInfo('取消操作')
          })
      },
      // 下载日志接口
      downLoadLogs(){
        downLoadLog(this.queryParams.testSession).then(response => {
          console.log(response)

          if (response.code == 500) {
            this.isLoading = false;
            clearInterval(this.timer)
            this.$root.globalDialog = false
            return this.msgError(response.msg);
          };
          if (response.code != 200) {
            return false;
          };
          this.$root.percentage = Number(100)
          this.percentage = Number(100)
        }).catch(error=>{
          console.log(error)
        })
      },
      // 获取下载日志的进度
      queryProcess(){
        logProgress().then(response => {
          console.log(response)
          if (response.code != 200) {
            return this.msgError(response.msg);
          };
          this.percentage = Number(response.msg)*100;
          this.$root.percentage = Number(response.msg)*100;
        }).catch(error=>{
          console.log(error)
        })
      },
      // 获取日期列表
      getList() {
        downLoadAnswer()
          .then((res) => {
            console.log(res)
            if (res.code != 200) {
              return false;
            }
            let data = res.rows;
            let dateList = []
            for (const t of data) {
              // 检查缓存中是否已经存在
              if (dateList.find(c => c.testSession === t.testSession)) {
                // 已经存在说明以前记录过，现在这个就是多余的，直接忽略
                continue;
              }
              // 不存在就说明以前没遇到过，把它记录下来
              dateList.push(t);
            }
            this.dateList = dateList
          })
          .catch((error) => {
            console.log(error);
          });
      },
    }
  }
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
  @import "@/assets/styles/step.scss";
  .progress-dialog{
    background-color: rgba(0, 0, 0, 0.6);
    .el-dialog{
      margin: 0 !important;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .el-dialog__header{
      padding: 0;
      padding-bottom: 0;
      .el-icon-close:before{
        content: "";
      }
    }
  }
</style>

